<template>
	<view class="content">
		<view class="card">
			<view class="flex">
				<view class="" style="width: 40%;">
					<view class="text mar">
						我的碳积分
					</view>
					<view class="price mar">
						{{integral}}
					</view>
				</view>
				<view class="" style="width: 50%;">
					<view class="text">
						可提现金额（元）
					</view>
					<view class="price">
						{{integral / 100}}
					</view>
				</view>
			</view>
			<view class="jifen">
				注：100积分 = 1元，积分只能兑换100的倍数
			</view>
		</view>
		<view class="ff">
			<view class="tixian">
				<img src="../../static/images/cc.png" alt="">
				<view class="fanshi">
					提现方式
				</view>
			</view>
			<view class="zhifu">
				<view style="position: relative;" :class="currentIndex === 0 ? 'active' : ''" @click="currentIndex = 0">

					<view class="daxiao" :class="currentIndex === 0 ? 'border' : ''">
						<img src="../../static/images/ff.png" alt="">
						<view class="">
							支付宝
						</view>

					</view>
					<div class="selected" v-if="currentIndex === 0"></div>
				</view>
				<view style="position: relative;" :class="currentIndex === 1 ? 'active' : ''" @click="currentIndex = 1">
					<view class="daxiao">
						<img src="../../static/images/ee.png" alt="">
						<view class="">
							微信
						</view>

					</view>
					<div class="selected" v-if="currentIndex === 1"></div>
				</view>

			</view>
			<view class="pay" v-if="currentIndex === 0" @click="scoreWay(0)">
				<view class="way">
					提现支付宝：
				</view>
				<view class="way1">
					{{aliName}}（{{aliAccountNumber}}）
				</view>
				<view class="account-number">
					<view class="text">
						切换账号
					</view>
					<img src="../../static/images/right.png" alt="" srcset="">
				</view>
			</view>
			<view class="pay" v-if="currentIndex === 1" @click="scoreWay(currentIndex)">
				<view class="way">
					提现微信：
				</view>
				<view class="way1">
					{{wxName}}（{{wxAccountNumber}}）
				</view>
				<view class="account-number">
					<view class="text">
						切换账号
					</view>
					<img src="../../static/images/right.png" alt="" srcset="">
				</view>
			</view>
			<view class="tixian" style="margin: 32rpx 0;">
				<img src="../../static/images/cc.png" alt="">
				<view class="fanshi">
					提现金额
				</view>
			</view>
			<view class="zhifu">
				<view class="" style="position: relative;" :class="currentPrice === 0 ? 'active' : ''"
					@click="currentPrice = 0">
					<view class="daxiao" style="width: 160rpx;height: 90rpx;border-radius: 15rpx;">

						<view class="">
							10元
						</view>

					</view>
					<div class="selected" v-if="currentPrice === 0"></div>
				</view>
				<view class="" style="position: relative;" :class="currentPrice === 1 ? 'active' : ''"
					@click="currentPrice = 1">
					<view class="daxiao" style="width: 180rpx;height: 90rpx;border-radius: 15rpx;">

						<view class="">
							20元
						</view>

					</view>
					<div class="selected" v-if="currentPrice === 1"></div>
				</view>
				<view class="" style="position: relative;" :class="currentPrice === 2 ? 'active' : ''"
					@click="currentPrice = 2">
					<view class="daxiao" style="width: 180rpx;height: 90rpx;border-radius: 15rpx;">

						<view class="">
							30元
						</view>
					</view>
					<div class="selected" v-if="currentPrice === 2"></div>
				</view>

			</view>
			<view class="zhifu" style="margin-top: 50rpx;">
				<view class="" style="position: relative;" :class="currentPrice === 3 ? 'active' : ''"
					@click="currentPrice = 3">
					<view class="daxiao" style="width: 160rpx;height: 90rpx;border-radius: 15rpx;">

						<view class="">
							50元
						</view>

					</view>
					<div class="selected" v-if="currentPrice === 3"></div>
				</view>
				<view class="" style="position: relative;" :class="currentPrice === 4 ? 'active' : ''"
					@click="currentPrice = 4">
					<view class="daxiao" style="width: 180rpx;height: 90rpx;border-radius: 15rpx;">

						<view class="">
							100元
						</view>

					</view>
					<div class="selected" v-if="currentPrice === 4"></div>
				</view>
				<view class="" style="position: relative;" :class="currentPrice === 5 ? 'active' : ''"
					@click="currentPrice = 5">
					<view class="daxiao" style="width: 180rpx;height: 90rpx;border-radius: 15rpx;">

						<view class="">
							200元
						</view>
					</view>
					<div class="selected" v-if="currentPrice === 5"></div>
				</view>

			</view>
			<view class="tixian1">
				<img src="../../static/images/cc.png" alt="">
				<view class="fanshi">
					提现说明
				</view>
			</view>
			<view class="three">
				<div>
					1.同一用户每天仅可提现1次；
				</div>
				<div>
					2.提现申请将在1-3个工作日内审批到账,请耐心等待；
				</div>
				<div>
					3.查询提现到账:微信-我-钱包-零钱-零钱明细,支付宝-我的-账单
				</div>


			</view>
		</view>

		<view class="call" @click="call">
			立即提现
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				currentIndex: 0,
				currentPrice: 0,
				integral: '',
				aliName: '',
				wxName: '',
				aliAccountNumber: '',
				wxAccountNumber: ''
			}
		},
		methods: {
			call() {
				uni.showToast({
					title: '当前积分为0,无法提现',
					duration: 2000
				});
			},
			scoreWay(num) {
				console.log(num)
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: `/pagesA/integral/scoreWay?num=${num}`
				})
			}
		},
		onLoad(option) {
			this.integral = option.integral == undefined ? uni.getStorageSync('integral') : option.integral
			console.log(this.integral, 'this.integralthis.integral')
            if(option.Num == undefined){
				this.currentIndex = 0 
			}else{
				 this.currentIndex = Number(option.Num)
			}
           
			this.aliName = option.aliName
			this.aliAccountNumber = option.aliAccountNumber
			this.wxName = option.wxName
			this.wxAccountNumber = option.wxAccountNumber
			console.log(this.wxName, this.wxAccountNumber, option.Num, '1111111111111')


		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F1F4F9;
		// padding: 20rpx 12rpx 12rpx 12rpx;
		width: 100vw;
		height: 100vh;

		.card {
			// margin: 16rpx 12rpx 8rpx 11rpx;

			background: url('../../static/images/gg.png');
			// width: 670rpx;
			// height: 184rpx;
			// width: 100%;
			// height: 100%;
			background-size: 100% 100%;
			padding: 44rpx 44rpx 20rpx 32rpx;

			// padding: 40rpx  20rpx;
			// display: flex;
			// justify-content: space-around;
			.flex {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid white;

				.text {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-bottom: 20rpx;
				}

				.mar {
					margin-left: 20rpx;
				}

				.price {
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 56rpx;
					color: #FFFFFF;
					margin-bottom: 20rpx;
				}
			}

			.jifen {
				height: 24rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				margin: 20rpx 0;
				line-height: 24rpx;
			}
		}

		.tixian {
			// margin-left: 20rpx;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;

			// margin-top: 20rpx;
			img {
				width: 6rpx;
				height: 24rpx;
				padding-left: 68rpx;
			}

			.fanshi {
				padding-left: 20rpx;

			}
		}

		.tixian1 {
			// margin-left: 20rpx;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;

			img {
				width: 6rpx;
				height: 24rpx;
				padding-left: 68rpx;
			}

			.fanshi {
				padding-left: 20rpx;

			}
		}

		.zhifu {
			padding-left: 24rpx;
			display: flex;
			justify-content: space-around;

			.daxiao {
				width: 281rpx;
				height: 91rpx;
				border: 1rpx solid #ccc;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-radius: 15rpx;

				img {
					width: 50rpx;
					height: 50rpx;

				}
			}

			.daxiao:focus {
				border-color: blue;
			}
		}

		.three {
			width: 600rpx;
			height: 200rpx;
			padding-left: 60rpx;
			padding-bottom: 40rpx;
			width: 595rpx;
			height: 131rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			line-height: 36rpx;
			opacity: 0.85;
			margin-bottom: 56rpx;
		}
	}

	.call {
		// margin-top: 24rpx;
		background: url('../../static/images/ten.png');
		width: 702rpx;
		height: 88rpx;
		background-size: 100% 100%;
		line-height: 88rpx;
		text-align: center;
		font-family: Source Han Sans SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		opacity: 0.85;
		margin: 0 24rpx;
	}

	.ff {
		background: #FFFFFF;
		padding-top: 32rpx;
	}


	.selected:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		// border-bottom: 25px solid rgb(80, 179, 252);
		// border-left: 25px solid transparent;

		border-top: 25px solid rgb(80, 179, 252);
		border-left: 25px solid transparent;
		// border-top-right-radius: 15rpx; /* 添加这一行 */
		// border-top-left-radius: 15rpx;
		// border-bottom-right-radius:15rpx;
		// border-bottom-left-radius: 15rpx;
	}

	.selected:before {
		content: '';
		position: absolute;
		width: 11px;
		height: 5px;
		background: transparent;
		top: 3px;
		right: 1px;
		border: 2px solid white;
		border-top: none;
		border-right: none;
		-webkit-transform: rotate(-55deg);
		-ms-transform: rotate(-55deg);
		transform: rotate(-55deg);
		z-index: 9;
	}

	// .border{
	//   border: 1rpx solid transparent;
	// }
	.active {
		// border: 0;
		// border-color: red;
		border-radius: 15rpx;
		// border: 1rpx solid rgb(80, 179, 252);
		color: rgb(80, 179, 252);
	}

	.pay {
		display: flex;
		// justify-content: space-between;
		padding-left: 66rpx;
		margin-top: 20rpx;
		// margin-right: 56rpx;

		.way {
			height: 24rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			opacity: 0.45;
		}

		.way1 {
			width: 55%;
			height: 24rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			opacity: 0.45;
		}

		.account-number {
			display: flex;
			align-items: center;

			.text {
				height: 24rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				// line-height: 11rpx;
				opacity: 0.45;
				padding-right: 16rpx;
			}

			img {
				margin-top: 4rpx;
				width: 10rpx;
				height: 20rpx;
			}
		}
	}
</style>